<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="small" @click="openEdit(row_id)">{{
      $t("organization.edit_department")
    }}</el-button>
    <el-dialog
      v-if="dialogTableVisible"
      :visible.sync="dialogTableVisible"
      :title="$t('table.edit')"
      width="30%"
    >
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-position="right"
      >
        <el-form-item :label="$t('table.company')" prop="company">
          <el-input
            :disabled="true"
            v-model="formData.company"
            label="right"
            type="text"
            :placeholder="$t('validation.company')"
          />
        </el-form-item>
        <el-form-item :label="$t('table.department')" prop="department">
          <el-input
            v-model="formData.department"
            label="right"
            type="text"
            :placeholder="$t('validation.department')"
          />
        </el-form-item>
        <el-form-item align="right">
          <div>
            <el-button type="primary" size="small" @click="submitForm()">{{
              $t("table.complete")
            }}</el-button>
            <el-button size="small" @click="closeDia()">{{
              $t("table.cancel")
            }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";
import {
  department_edit,
  department_info
} from "@/api/organization_manage/organization_manage";

export default {
  props: {
    row_id: {
      type: Number,
      default: function() {
        return null;
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      formData: {},
      rules: {
        company: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        department: [
          {
            required: true,
            message: this.$t("validation.department"),
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    openEdit(id) {
      console.log(id, "id");
      this.dialogTableVisible = true;
      //  根据id获取信息
      department_info(store.getters.token, { id: id }).then(res => {
        this.formData = res.data.data;
        console.log(res, "resssssss");
      });
    },
    submitForm() {
      console.log("formData---------->", this.formData);

      this.$refs.formData.validate(valid => {
        console.log(valid, "valid");
        if (!valid) return;
        // 修改数据
        department_edit(store.getters.token, this.formData).then(res => {
          if (res.data.status) {
            this.$message.success(this.$t("table.edit_complete"));
            this.$emit("getLists");
          } else if (res.data.msg == "更新据失败！") {
            this.dialogVisible = false;
          } else {
            this.$message.error(this.$t("table.edit_fail"));
          }
          this.dialogTableVisible = false;
        });
      });
    },
    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false;
    }
  }
};
</script>

<style scoped>
/* 取消输入框下边距 */
.el-form-item {
  margin-bottom: 15px;
}
</style>
